<template>
  <!-- 新增部门的弹层 -->
  <el-dialog :title="title" :visible="showDialog" @close="closeFn">
    <!-- 表单组件  el-form   label-width设置label的宽度   -->
    <!-- 匿名插槽 -->
    <!--
        表单验证：
                 1.在el-form 绑定数据 model
                 2.在el-form 绑定规则 rules
                 3.在el-form-item 添加验证字段prop
                 4.双向绑定输入表单
     -->
    <el-form ref="form" :model="formData" :rules="rules" label-width="120px">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model.trim="formData.name" style="width:80%" placeholder="1-50个字符" />
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input v-model.trim="formData.code" style="width:80%" placeholder="1-50个字符" />
      </el-form-item>
      <el-form-item label="部门负责人" prop="manager">
        <el-select v-model.trim="formData.manager" style="width:80%" placeholder="请选择">
          <el-option v-for="item in employees" :key="item.id" :label="item.username" :value="item.username" />
        </el-select>
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input v-model.trim="formData.introduce" style="width:80%" placeholder="1-300个字符" type="textarea" :rows="3" />
      </el-form-item>
    </el-form>
    <!-- el-dialog有专门放置底部操作栏的 插槽  具名插槽 -->
    <el-row slot="footer" type="flex" justify="center">
      <!-- 列被分为24 -->
      <el-col :span="6">
        <el-button type="primary" size="small" @click="confirmFn">确定</el-button>
        <el-button size="small" @click="closeFn">取消</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import { getComponents, addComponent, getComponentById, updateComponent } from '@/api/components'
import { getEmployeeSimple } from '@/api/employees'
export default {
  /*
    props中的变量是只读的，也就是说不能直接在子组件中修改props的变量
    子组件直接修改数据，会造成父子组件数据不一致。props中的变量是只读的，也就是说不能直接在子组件中修改props的变量
    子组件直接修改数据，会造成父子组件数据不一致。
    因此  :visible="showDialog" 不能写:visible.sync
  */
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    // 接收点击的部门信息
    culDept: {
      type: Object,
      required: true
    }
  },
  data() {
    // 自定义校验规则-->校验部门名称不能重复
    const checkName = (rule, value, callback) => {
    //   console.log(rule, value, callback)
    //   console.log(this.departmentsList)
      /** *
       * rule      : 当前的校验规则
       * value     : 当前输入框的值
       * callback(): 函数,当前直接调用callback 函数表示校验通过,
       * callback("验证失败"),如果传入参数表示校验失败
       * @校验步骤:
       *    1. 通过点击id获取当前id所有的子部门列表
       *    2. 判断输入value是否存在子部门列表中
       *    注意:企业名称没有id,需要给company设置id:''
      */
      let sonDepts
      if (this.formData.id) {
        // 编辑
        const sonDeptsList = this.departmentsList.filter(item => item.id !== this.formData.id && item.pid === this.formData.pid)
        sonDepts = sonDeptsList.some(item => value === item.name)
      } else {
        // 新增
        sonDepts = this.departmentsList.filter(item => this.culDept.id === item.pid).some(item => value === item.name)
      }
      sonDepts ? callback('部门名称已存在!') : callback()
    }
    //  自定义校验规则-->校验编码不能重复
    const checkCode = (rule, value, callback) => {
      let sonDepts
      if (this.formData.id) {
        // 修改
        sonDepts = this.departmentsList.some(item => {
          return value === item.code && this.formData.id !== item.id
        })
      } else {
        // 新增
        sonDepts = this.departmentsList.some(item => {
          return value === item.code
        })
      }

      sonDepts ? callback('部门编码已存在!') : callback()
    }
    return {
      // 新增表单数据
      formData: {
        name: '',
        code: '',
        manager: '',
        introduce: ''
      },
      // 验证规则
      rules: {
        name: [
          { required: true, message: '部门名称不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '部门名称长度为1-50个字符', trigger: 'blur' },
          // 需求：子部门不能重名
          // 自定义校验
          { validator: checkName, trigger: 'blur' }
        ],
        code: [
          { required: true, message: '部门编码不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '部门编码长度为1-50个字符', trigger: 'blur' },
          // 需求：编码不能重复
          // 自定义校验
          { validator: checkCode, trigger: 'blur' }
        ],
        manager: [
          { required: true, message: '部门负责人不能为空', trigger: 'blur' }
        ],
        introduce: [
          { required: true, message: '部门介绍不能为空', trigger: 'blur' },
          { min: 1, max: 300, message: '部门介绍长度1到300个字符', trigger: 'blur' }
        ]
      },
      // 保存部门列表数据
      departmentsList: [],
      // 保存简单员工列表
      employees: []
    }
  },
  // 计算属性
  computed: {
    title() {
      return !this.formData.id ? '新增部门' : '编辑部门'
    }
  },
  async created() {
    // 保存员工列表
    this.employees = await getEmployeeSimple()
  },
  methods: {
    // 关闭dialog
    closeFn() {
      // 重置表单数据
      this.formData = {
        name: '',
        code: '',
        manager: '',
        introduce: ''
      }
      // 关闭弹窗->使用resetFields()方法重置
      // 1.可以重置表单校验
      // 2.可以重置表单数据（和上面重置表单数据功能一样）
      this.$refs.form.resetFields()
      // this.$emit('closeEvent')
      // ❗使用sync修饰符优化后
      this.$emit('update:showDialog', false)
    },
    // 点击新增/或编辑提交表单校验
    async confirmFn() {
      await this.$refs.form.validate()
      if (!this.formData.id) {
        console.log('新增')
        // 校验通过-》调用接口--》新增数据
        await addComponent({
          ...this.formData,
          pid: this.culDept.id
        })
      } else {
        console.log('编辑')
        // 校验通过-》调用接口--》编辑数据
        await updateComponent(this.formData)
      }

      // 关闭窗口 and 重置表单
      this.closeFn()
      // 重新渲染部门列表数据
      this.$emit('updataEvent')
    },
    // 获取部门列表所有数据
    // 在点击新增的时候调用
    async getComponents() {
      const res = await getComponents()
      this.departmentsList = res.depts
    },
    // 编辑，获取部门详情
    async getDepartmentDetail(id) {
      this.formData = await getComponentById(id)
    }
  }
}
</script>

<style>

</style>
